import React, { useState, useEffect } from 'react';
import '../styles/ErrorBanner.css';

/**
 * Displays error messages as a banner at the top of the application
 */
const ErrorBanner = ({ error, onDismiss, autoDismissTime = 10000 }) => {
  const [visible, setVisible] = useState(true);
  
  // Auto-dismiss the banner after specified time
  useEffect(() => {
    if (!error.recoverable) {
      return; // Don't auto-dismiss critical errors
    }
    
    const timer = setTimeout(() => {
      handleDismiss();
    }, autoDismissTime);
    
    return () => clearTimeout(timer);
  }, [error, autoDismissTime]);
  
  const handleDismiss = () => {
    setVisible(false);
    if (onDismiss) {
      onDismiss();
    }
  };
  
  if (!visible || !error) return null;
  
  const severityClass = error.recoverable ? 'warning' : 'error';
  
  return (
    <div className={`error-banner ${severityClass}`}>
      <div className="error-content">
        <span className="error-icon">
          {error.recoverable ? '⚠️' : '❌'}
        </span>
        <div className="error-message">
          <h4>{error.extension}</h4>
          <p>{error.message}</p>
        </div>
        <button 
          className="dismiss-button" 
          onClick={handleDismiss}
          aria-label="Dismiss error message"
        >
          ×
        </button>
      </div>
    </div>
  );
};

export default ErrorBanner;
